<template>
  <div id="tanc_road" >
    <div class="routeHeader">
      <b>结点详情</b>
      <el-button @click="closeTanc" type="danger" circle size="small" style="float: right"><el-icon><CloseBold /></el-icon></el-button>
    </div>
    <road-nodes-child :roadNodesId="currentID" v-if="isDetail" @wrong="closeTanc"></road-nodes-child>
  </div>


  <el-container>
    <el-header class="auditor_header">

        公路结点

    </el-header>
    <el-main>
<!--      <el-row>-->
<!--        <el-col :span="4">-->
<!--          <el-input v-model="inputID" placeholder="请输入结点序号" />-->
<!--        </el-col>-->
<!--        <el-col :span="4">-->
<!--          <el-button type="warning" @click="showDetail(inputID)">-->
<!--            查询-->
<!--          </el-button>-->
<!--        </el-col>-->
<!--      </el-row>-->
      <el-table :data="roadsData" stripe border style="width: 100%;height: 480px;">
        <el-table-column  label="序号"  >
          <template #default="scope">
            {{number(scope.row.no)}}
          </template>
        </el-table-column>

        <el-table-column prop="nodeName" label="结点名称" />
        <el-table-column prop="longitude" label="经度" />
        <el-table-column prop="latitude" label="纬度" />
        <el-table-column prop="indexCities" label="所在州市" />
<!--        <el-table-column  label="操作"  >-->
<!--          <template #default="scope">-->
<!--            <el-button  type="primary" @click="showDetail(scope.row.roadNodesId)">查看详情</el-button>-->
<!--          </template>-->
<!--        </el-table-column>-->
      </el-table>
    </el-main>
    <el-footer>
      <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          background="background"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          :page-sizes="[5,10,15,20]"
          @size-change="changePage"
          @current-change="changePage"
      />
    </el-footer>
  </el-container>
  <div id="hidebg"></div>
</template>

<script>
import axios from "axios";
import roadNodesChild from "@/router/administrator/updateRoad/roadNodesChild";
import {ElMessage} from "element-plus";
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "roadNodes",
  components:{
    roadNodesChild
  },
  data(){
    return{
      inputID:'',
      roadsData:[],
      total: 0,
      currentPage:1,
      pageSize:5,
      isDetail:false,
      currentID:'',
    }
  },
  mounted() {
    this.changePage()
  },
  methods:{
    number(a){
      return a+(this.currentPage-1)*this.pageSize
    },
    closeTanc(){
      document.getElementById('hidebg') .style.display='none'
      document.getElementById('tanc_road') .style.display='none'
      this.changePage()
      this.isDetail=false
    },
    showDetail(a){//展示详情页
      if(a===''){
        // alert("id不能为空")
        ElMessage.warning('id不能为空')
      }else{
        console.log("到了")
        this.currentID=a
        var hideobj=document.getElementById("hidebg");
        hideobj.style.display="block";  //显示隐藏层
        //hidebg.style.height=document.body.clientHeight+"px";  //设置隐藏层的高度为当前页面高度
        document.getElementById("tanc_road").style.display="block";  //显示弹出层
        this.isDetail=true
      }

    },
    changePage(){
      axios({
        method: 'post',
        url: '/api/road/showNode',
        params: {
          pageNum: this.currentPage,
          pageSize: this.pageSize
        },

      })
          .then((res)=>{
            this.roadsData=res.data.data.roadNodesList
            for(var i=0;i<this.roadsData.length;i++){
              this.roadsData[i]['no']=i+1;
            }
            this.total=res.data.data.total
          });
    }
  }
}
</script>

<style scoped>
.auditor_header{
  height: 40px;
  text-align: left;
  line-height: 40px;
  font-size: 20px;
  font-weight: bolder;
  border-bottom: rgba(140, 147, 157, 0.38) 1px solid;
}
.el-container{
  height: 100%;
  width: 100%;
}
.el-footer{
  text-align: center;
  position: relative;
  bottom: 0px;
}
.el-row{
  margin-bottom: 20px !important;
}
.el-pagination{
  justify-content: center !important;
}
#hidebg {
  position:absolute;
  left:0px;
  top:0px;
  background-color: #888787;
  width:100%;  /*宽度设置为100%，这样才能使隐藏背景层覆盖原页面*/
  height: 100%;
  filter:alpha(opacity=60);  /*设置透明度为60%*/
  opacity:0.6;  /*非IE浏览器下设置透明度为60%*/
  display:none;
  z-Index:10;
}
#tanc_road{
  display: none;
  transform: translate(-50%,-50%);
  height: 600px;
  width: 700px;
  left: 50%;
  top:50%;
  position: absolute;
  z-index: 11;
  background-color: white;
  border: #222222 solid 1px;
}
.routeHeader{
  background-color: #409EFF;
  height: 25px;
  text-align: center;
  padding: 5px;
}
</style>